<template>
    <div>
        <div class="top_card">
            <div class="img_wrap">
                <img :src="topList.coverImgUrl" alt="">
            </div>
            <div class="info_wrap">
                <div class="tag">精品歌单</div>
                <div class="title">{{topList.name}}</div>
                <div class="content">{{topList.description}}</div>
            </div>
            <img :src="topList.coverImgUrl" class="bgimg">
            <div class="bg_mask"></div>
        </div>
        <div class="main_card">
            <div class="tab_bar">
                <span class="types" :class="{active:tag=='全部'}" @click="tag='全部'">全部</span>
                <span class="types" :class="{active:tag=='欧美'}" @click="tag='欧美'">欧美</span>
                <span class="types" :class="{active:tag=='华语'}" @click="tag='华语'">华语</span>
                <span class="types" :class="{active:tag=='流行'}" @click="tag='流行'">流行</span>
                <span class="types" :class="{active:tag=='说唱'}" @click="tag='说唱'">说唱</span>
                <span class="types" :class="{active:tag=='摇滚'}" @click="tag='摇滚'">摇滚</span>
                <span class="types" :class="{active:tag=='民谣'}" @click="tag='民谣'">民谣</span>
                <span class="types" :class="{active:tag=='电子'}" @click="tag='电子'">电子</span>
                <span class="types" :class="{active:tag=='轻音乐'}" @click="tag='轻音乐'">轻音乐</span>
                <span class="types" :class="{active:tag=='影视原声'}" @click="tag='影视原声'">影视原声</span>
                <span class="types" :class="{active:tag=='ACG'}" @click="tag='ACG'">ACG</span>
                <span class="types" :class="{active:tag=='怀旧'}" @click="tag='怀旧'">怀旧</span>
                <span class="types" :class="{active:tag=='治愈'}" @click="tag='治愈'">治愈</span>
                <span class="types" :class="{active:tag=='旅行'}" @click="tag='旅行'">旅行</span>
            </div>
            <div class="items">
                <div class="item" v-for="(item,index) in list" :key="index" @click="toPlayList(item.id)">
                    <div class="img_wrap">
                        <span class="copywriter">播放量:{{item.playCount}}</span>
                        <img :src="item.coverImgUrl" alt="">
                        <span class="el-icon-video-play play-but" ></span>
                    </div>
                    <div class="info_wrap">
                        <p>{{item.name}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="page_card">
            <el-pagination
                    @current-change="currentPage"
                    layout="prev, pager, next"
                    :current-page="page"
                    :page-size="15"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    //导入axios
    import axios from 'axios';
    export default {
        name: "recommendList",
        data(){
            return{
                topList:{},
                list:[],
                tag:'全部',
                //分页的总记录数
                total:0,
                //当前页数
                page:1,
            }

        },
        //侦听器
        watch:{
            tag(){
                if(this.tag!='旅行')//接口中没有旅行
                 this.topData();
                this.page=1;
                this.listData();
            }
        },
        created(){
           this.topData();
           this.listData();

        },
        methods:{
            topData(){
                axios({
                    url:'https://autumnfish.cn/top/playlist/highquality',
                    method:'get',
                    params:{
                        limit:1,
                        cat:this.tag,
                    }
                }).then(response=>{
                    //console.log(response);
                    this.topList=response.data.playlists[0];
                })
            },
            listData(){
                axios({
                    url:'https://autumnfish.cn/top/playlist',
                    method:'get',
                    params:{
                        limit: 15,
                        offset:(this.page-1)*15,
                        cat: this.tag,
                    }
                }).then(response=>{
                    //console.log(response);
                    this.total=response.data.total;
                    this.list=response.data.playlists;
                })
            },
            currentPage(tpage){
                //console.log("当前页"+tpage);
                this.page=tpage;
                this.listData();
            },
            toPlayList(id){
                this.$router.push(`/PlayList?id=${id}`);
            },

        },

    }
</script>

<style scoped>
    img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .top_card{
        display: flex;
        position:relative;
        width: 90%;
        height: 200px;
        left: 5%;
        top:5px;
        overflow: hidden;
        padding: 10px;
        border-radius: 5px;
    }
    .top_card .img_wrap{
        position: relative;
        width: 180px;
        height: 180px;
        z-index: 1;
        flex:0 0 auto;
        margin-right: 20px;
    }
    .top_card .info_wrap{
       z-index: 1;
       width: 80%;
       height: 200px;
       flex:0 0 auto;
   }
    .top_card .info_wrap .tag{
        position: relative;
        width: 100px;
        height: 30px;
        border: 1px solid orange;
        text-align: center;
        color: orange;
        line-height: 30px;
    }
    .top_card .info_wrap .title{
        position: relative;
        width: 100%;
        top:5px;
        color: white;
    }
    .top_card .info_wrap .content{
        position: relative;
        color: grey;
        width: 100%;
        top:10px;
        text-overflow: ellipsis;
        /*多行文字溢出效果*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:6;
    }
    .top_card .bgimg{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        width: 100%;
        filter: blur(20px);
    }
    .top_card .bg_mask{
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
    }
    .main_card{
        position: relative;
        width: 90%;
        padding-top: 30px;
        left: 5%;
    }
    .main_card .tab_bar{
        display: flex;
        justify-content: flex-end;
    }
    .tab_bar .types{
        color: grey;
        font-size: 16px;
        margin-right: 20px;
        cursor:pointer;
    }
    .tab_bar .types.active{
        color: crimson;
    }
    .items .img_wrap{
        position: relative;
        width: 200px;
        height: 200px;
    }
    .items{
        display: flex;
        flex-wrap:wrap;
    }
    .item{
        position: relative;
        width: 210px;
        margin: 10px;
        overflow: hidden;
        cursor: pointer;
    }
    .copywriter{
        position: absolute;
        width: 200px;
        top:-50px;
    }
    .img_wrap:hover .copywriter{
        position: absolute;
        width: 200px;
        top:0;
        color: white;
        background-color: black;
        opacity: 0.8;
    }
    .play-but{
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        bottom: -200px;
        right: 0;
        font-size:50px;
        color: sandybrown;
    }
    .img_wrap:hover .play-but{
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        bottom: 0;
        right: 0;
        font-size:50px;
        color: sandybrown;
        cursor:pointer;
    }
    .page_card{
        position: relative;
        width: 90%;
        left: 5%;
        text-align: center;
    }


</style>